<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="825px"
    :before-close="handleClose">


  <el-form ref="form" class="form" :rules="rules" :model="form" label-width="80px" label-position="top">
    <el-form-item prop="experimentName" label="实验名称">
      <el-input  :disabled="type === 'view'" v-model="form.experimentName"></el-input>
    </el-form-item>
    <el-form-item prop="customId" label="客户人员名称">
      <el-select :disabled="type === 'view'" v-model="form.customId"  placeholder="请选择">
        <el-option v-for="item in cusUser" :label="item.name"
                   :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="场地" prop="siteId">
      <el-select :disabled="type === 'view'" v-model="form.siteId"  placeholder="请选择">
        <el-option v-for="item in siteList" :label="item.siteName"
                   :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="实验人员" prop="experimentUserId">
      <el-select :disabled="type === 'view'" v-model="form.experimentUserId"  placeholder="请选择">
        <el-option v-for="item in expUser" :label="item.name"
                   :value="item.id"></el-option>
      </el-select>
    </el-form-item>


    <el-form-item prop="spare1" label="委试号">
      <el-input  :disabled="type === 'view'" v-model="form.spare1"></el-input>
    </el-form-item>
    <el-form-item prop="spare2" label="型号名称">
      <el-input  :disabled="type === 'view'" v-model="form.spare2"></el-input>
    </el-form-item>

    <el-form-item label="实验时间" prop="daterange">
      <el-date-picker
        :disabled="type === 'view'"
        style="width: 250px"
        v-model="form.daterange"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="附件" prop="experimentData"    style="width: 250px">
      <el-button size="small" type="primary" @click="previewClick" v-if="type === 'view'">预览</el-button>
      <el-upload
        v-else
        :on-success="fileSuccess"
        :limit="1"
        :on-remove="fileRemove"
        :headers="uploadHeaders"
        :file-list="fileList"
        ref="upload"
        class="upload-demo"
        action="/api/blade-platform/oss/endpoint/put-file"
       >
        <el-button size="small" :disabled="form.experimentData" type="primary">点击上传</el-button>
<!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
      </el-upload>
    </el-form-item>
    <el-form-item label="报告" prop="experimentData"    style="width: 250px">
      <el-button size="small" type="primary" @click="previewClick1" v-if="type === 'view'">预览</el-button>
      <el-upload
        v-else
        :on-success="fileSuccess1"
        :limit="1"
        accept=".pdf"
        :on-remove="fileRemove1"
        :headers="uploadHeaders"
        :file-list="fileList1"
        ref="upload"
        class="upload-demo"
        action="/api/blade-platform/oss/endpoint/put-file"
       >
        <el-button size="small" :disabled="form.spare3" type="primary">点击上传</el-button>
<!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
      </el-upload>
    </el-form-item>
  </el-form>
    <span slot="footer" v-if="['add','edit'].includes(type)" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleConfirm">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
  import {getAssociatedDb} from "../../../api/platform/devicetable";
  // import {getAssociatedCamera,getDetail,getSiteList} from "../../../api/platform/sitesettingstable";
  import {getDeptTree} from "../../../api/system/dept";
  // import {findName,deepFind} from "../../../util/util";
  import {getUserList,getSiteList} from "../../../api/platform/workshopmanagetable";
  import {getToken} from "../../../util/auth";
  import _ from 'lodash'
  export default {
    name:'add-modal',
    data(){
      return{
        uploadHeaders: {
          'Blade-Auth': 'bearer ' + getToken()
        },
        visible: false,
        type: 'add',
        form: {},
        options:{
          value:'id',
          label:'title'
        },
        siteList:[],
        cusUser:[],
        expUser:[],

      }
    },
    computed:{
      title() {
        switch (this.type) {
          case "add":
            return '新增';
          case 'edit':
            return '编辑';
          case 'view':
            return '查看'
        }
      },
      fileList(){
        if(!this.form.experimentData)return [];
        const arr = this.form.experimentData.split('/')
        let name = ''
        if(arr && arr.length){
          name = arr[arr.length-1]
        }
        return [{
          name,
          url:this.form.experimentData
        }]
      },
      fileList1(){
        if(!this.form.spare3)return [];
        const arr = this.form.spare3.split('/')
        let name = ''
        if(arr && arr.length){
          name = arr[arr.length-1]
        }
        return [{
          name,
          url:this.form.spare3
        }]
      },
      isDev(){
        return process.env.NODE_ENV === 'development'
      },
      rules(){
        return{
          experimentName: [{required: true, message: '请输入实验名称'}],
          statusDeviceId: [{required: true, message: '请选择状态设备'}],
          siteId: [{required: true, message: '请选择场地'}],
          daterange: [{required: true, message: '请选择实验时间'}],
        }
      }
    },
    methods:{
      previewClick(){
        const Base64 = require('js-base64').Base64
        var url = this.form.experimentData; //要预览文件的访问地址
        const base = this.isDev?'http://10.10.10.13:8012':window.location.origin
        window.open(base+'/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
      },
      previewClick1(){
        const Base64 = require('js-base64').Base64
        var url = this.form.spare3; //要预览文件的访问地址
        const base = this.isDev?'http://10.10.10.13:8012':window.location.origin
        window.open(base+'/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
      },
      fileRemove(e){
        this.$set(this.form,'experimentData','')
      },
      fileRemove1(e){
        this.$set(this.form,'spare3','')
      },
      fileSuccess(res){
        this.$set(this.form,'experimentData',res.data.link)
      },
      fileSuccess1(res){
        this.$set(this.form,'spare3',res.data.link)
      },

      handleConfirm(){
        this.$refs.form.validate(valid=>{
          if(valid){
            let data = _.cloneDeep(this.form);
            data.experimentStartTime = data.daterange[0];
            data.experimentEndTime = data.daterange[1];

            if(this.type === 'add'){
              this.$emit('rowSave',data,this.handleClose)
            }else {
              this.$emit('rowUpdate',data,0,this.handleClose)
            }
          }
        })
      },
      showModal() {
        this.visible = true;

        getUserList('CLIENT').then(res=>{
          //客户人员
          this.cusUser = res.data.data;
          // this.$set(this.form,'customId',this.form.customId)
        })
        getUserList('EXPERIMENTER').then(res=>{
          //客户人员
          this.expUser = res.data.data;
        })
        getSiteList().then(res=>{
          this.siteList = res.data.data
        })
      },

      // getDetail(){
      //   getDetail(this.form.id).then(res=>{
      //     this.$set(this.form,'camera', res.data.data.cameraDevices[0].deviceId)
      //   })
      // },

      handleClose() {
        this.form = {}
        this.visible = false
        this.$refs.form.resetFields()
        this.$refs.upload.clearFiles()
      },
    }
  }
</script>
<style scoped lang="scss">
  .form {
    display: grid;
    grid-column-gap: 20px;

    grid-template-columns: repeat(3, 1fr);

    .el-select {
      width: 100%;
    }
  }
</style>
